<!doctype html>
<html lang="en">
	<head>
		<title>标签首页</title>
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/js/colorpick/spectrum.css" />
	</head>

	<body>
		<div class="container-fluid">
			<div class="row">
				<div class="col-md-12">
					<h2>标签管理</h2>
					<hr />
				</div>
			</div>
			<div class="row">
				<form class="form-inline col-md-offset-1" action="javascript:;" id="tagForm">
					<div class="form-group">
						<label for="tagName">标签名:</label>
						<input type="text" name="tag_name" class="form-control" id="tagName" placeholder="请输入标签名" style="font-weight: 700;">
					</div>
					<div class="form-group" style="position:relative;">
						<label for="tagColor">颜色:</label>
						<input type="text" name="tag_color" class="form-control" id="tagColor" value="#000000" placeholder="颜色">
						<input type="text" class="form-control" id="selectColor1"  value="">
						<div id="colorPick" style="display:none;position: absolute;top:40px;left:20px;width:195px;height:195px;z-index:100000;">
						</div>
					</div>
					<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span>添加</button>
					<button type="reset" class="btn btn-info"><span class="glyphicon glyphicon-refresh"></span>重置</button>
				</form>
			</div>
			<br />
			<div class="row" style="padding:0 80px;">
				<div class="alert alert-warning" role="alert" id="messageBox" style="display: none;"></div>
				<div class="alert alert-info" role="alert">注意：如果删除了标签，那么有相应标签的文章的标签也会被删除</div>
				<div class="panel panel-default">
					<!-- Default panel contents -->
					<div class="panel-heading"><strong>标签列表</strong></div>
					<div class="panel-body" style="padding:0px;">
						<!-- Table -->
						<table class="table table-striped table-hover">
							<tr>
								<th>ID</th>
								<th>标签名</th>
								<th>标签颜色</th>
								<th>操作</th>
							</tr>
							<foreach name="tags" item="tag">
								<tr data-tid="{$tag.tag_id}" data-name="{$tag.tag_name}" data-color="{$tag.tag_color}">
									<td>{$tag.tag_id}</td>
									<td><span style="color:{$tag.tag_color};">{$tag.tag_name}</span></td>
									<td>{$tag.tag_color}</td>
									<td>
										<a href="javascript:;" class="btn btn-success btn-xs editBtn"><span class="glyphicon glyphicon-pencil"></span>修改</a>
										<a href="javascript:;" class="btn btn-danger btn-xs delBtn"><span class="glyphicon glyphicon-trash"></span>删除</a>
									</td>
								</tr>
							</foreach>
						</table>
					</div>
					<div class="panel-footer" style="">
						<!--<nav>
							<ul class="pagination" style="margin: 0;">
								<li>
									<a href="#" aria-label="Previous">
										<span aria-hidden="true">&laquo;</span>
									</a>
								</li>
								<li><a href="#">1</a></li>
								<li><a href="#">2</a></li>
								<li><a href="#">3</a></li>
								<li><a href="#">4</a></li>
								<li><a href="#">5</a></li>
								<li>
									<a href="#" aria-label="Next">
										<span aria-hidden="true">&raquo;</span>
									</a>
								</li>
							</ul>
						</nav>-->
					</div>
				</div>
			</div>
		</div>
		<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" id="editModal">
			<div class="modal-dialog modal-sm">
				<div class="modal-content">
					<div class="panel panel-default">
						<div class="panel-heading">
							<h3 class="panel-title"><strong><span class="glyphicon glyphicon-tag"></span> 修改标签</strong></h3>
						</div>
						<div class="panel-body">
							
							<form id="editTag">
								<input type="hidden" name="tag_id" id="tag_id" value="" />
								<div class="form-group">
									<label for="currentTagName">标签名</label>
									<input type="email" class="form-control" name="tag_name" id="currentTagName" style="font-weight: 700;">
								</div>
								<div class="form-group">
									<label for="currentTagColor">颜色</label>
									<input type="text" class="form-control" name="tag_color" id="currentTagColor">
								</div>
								<div class="form-group">
									<div class="form-group" style="position:relative;">
										<label for="tagColor">选择颜色:</label>
										<input type="text" class="form-control" id="selectColor2" value="">
										<div id="colorPick" style="display:none;position: absolute;top:40px;left:20px;width:195px;height:195px;z-index:100000;">
										</div>
									</div>
								</div>
							</form>
						</div>
						<div class="panel-footer">
							<a href="javascript:;" class="btn btn-success btn-sm" id="change">保存</a>
							<a href="javascript:;" class="btn btn-info btn-sm" id="noChange">取消</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script>
			var addTag = "{:U('addTag')}";
			var delTag = "{:U('delTag')}";
			var editTag = "{:U('editTag')}";
		</script>
		<script type="text/javascript" src="__PUBLIC__/js/jquery.js"></script>
		<script type="text/javascript" src="__PUBLIC__/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="__PUBLIC__/js/colorpick/spectrum.js"></script>

		<script type="text/javascript" src="__PUBLIC__/js/common.js"></script>
		<script type="text/javascript" src="__PUBLIC__/js/tag.js"></script>

		<script type="text/javascript">
			$("#selectColor1,#selectColor2").spectrum({
				showPaletteOnly: true,
				togglePaletteOnly: true,
				togglePaletteMoreText: 'more',
				togglePaletteLessText: 'less',
				color: 'blanchedalmond',
				palette: [
					["#000", "#444", "#666", "#999", "#ccc", "#eee", "#f3f3f3", "#fff"],
					["#f00", "#f90", "#ff0", "#0f0", "#0ff", "#00f", "#90f", "#f0f"],
					["#f4cccc", "#fce5cd", "#fff2cc", "#d9ead3", "#d0e0e3", "#cfe2f3", "#d9d2e9", "#ead1dc"],
					["#ea9999", "#f9cb9c", "#ffe599", "#b6d7a8", "#a2c4c9", "#9fc5e8", "#b4a7d6", "#d5a6bd"],
					["#e06666", "#f6b26b", "#ffd966", "#93c47d", "#76a5af", "#6fa8dc", "#8e7cc3", "#c27ba0"],
					["#c00", "#e69138", "#f1c232", "#6aa84f", "#45818e", "#3d85c6", "#674ea7", "#a64d79"],
					["#900", "#b45f06", "#bf9000", "#38761d", "#134f5c", "#0b5394", "#351c75", "#741b47"],
					["#600", "#783f04", "#7f6000", "#274e13", "#0c343d", "#073763", "#20124d", "#4c1130"]
				]
			});
			$("#selectColor1").change(function() {
				var currentColor = $(this).spectrum('get').toHexString();
				$('#tagColor').val(currentColor);
				$('#tagName').css({
					color: currentColor
				});
			})
			$("#selectColor2").change(function() {
				var currentColor = $(this).spectrum('get').toHexString();
				$('#currentTagColor').val(currentColor);
				$('#currentTagName').css({
					color: currentColor
				});
			})
		</script>
		<include file="./Public/foot" />

	</body>

</html>